import React from "react";
import "./homeitem.less";
import { useNavigate } from "react-router-dom";

type itmeType = {
  label: string;
  imgs: string;
  url?: string;
};
type HomeItemType = {
  title: string;
  itemList: itmeType[];
};
const HomeItem: React.FC<HomeItemType> = ({ title, itemList }) => {
  const navigate = useNavigate();
  const goto = (item: itmeType) => () => {
    let element = document.getElementsByClassName('homePage-contarnier')[0];
    // 获取当前页面滚动的高度
    let scrollTop = element.scrollTop.toString();
    sessionStorage.setItem('scrollTop', scrollTop);
    if (item.url) {
      navigate(item.url);
    }
  };

  return (
    <div className="home-root">
      <div className="title">{title}</div>
      <div className="itemBox">
        {itemList?.map((item) => {
          return (
            <div key={item?.label} className="box" onClick={goto(item)}>
              <img className="imgs" src={item.imgs} alt="" />
              <span className="label">{item.label}</span>
            </div>
          );
        })}
      </div>
    </div>
  );
};
export default HomeItem;
